<template>
  <div>
    <div class="d1">
      <p>ref的声明:{{height}}</p>
      <button @click="modifyHeight">ref的修改</button>
    </div>
    <div class="d1">
      <p>reactive声明:{{state.age}}</p>
      <button @click="modifyAge">reactive修改</button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue';

//ref 声明
const height = ref(1)
//ref 修改
const modifyHeight = () => {
  height.value++
}

//reactive 声明
const state = reactive({
  age: 1
})
//reactive 修改
const modifyAge = () => {
  state.age++
}
// const { age } = toRefs(state)

</script>
<style scoped lang ='less'>
.d1 {
  margin-top: 20px;
}
</style>